import React, { Component } from 'react';
import { getmvAllLimit } from '../../api/mvs';
import { withRouter } from 'react-router-dom';
import { Pagination } from 'antd';
import './mvs.less'

class index extends Component {
  constructor() {
    super()
    this.state = {
      tabListSection: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
      tabListType: ['全部', '官方版', '原声', '现场版', '网易出品'],
      tabListOrder: ['上升最快', '最热', '最新'],
      class1: ['title'],
      class2: ['title active'],
      tabListSectioncls: '全部',
      tabListTypecls: '全部',
      tabListOrdercls: '上升最快',
      data: [],
      count: 0,
      current: 1
    }
  }

  componentDidMount() {
    this.getmvAllLimitData()
  }

  getmvAllLimitData = async (section = this.state.tabListSectioncls, order = this.state.tabListOrdercls, type = this.state.tabListTypecls, offset = 0) => {
    const { data } = await getmvAllLimit(section, order, type, offset)
    this.setState({
      data: data.data,
      count: data.count ? data.count : this.state.count
    })
  }

  OnChanges = (page, pageSize) => {
    this.getmvAllLimitData(this.state.tabListSectioncls, this.state.tabListOrdercls, this.state.tabListTypecls, (page - 1) * 12)
    this.state.current = page
  }

  render() {
    return (
      <div className="mvs-container">
        <div className="filter-wrap">
          <div className="section-wrap">
            <span className="section-type">地区：</span>
            <ul className="tabs-wrap">
              {
                this.state.tabListSection.map((element, i) => {
                  return <li key={i} className="tab"><span onClick={() => {
                    this.setState({
                      tabListSectioncls: element,
                      current: 1
                    })
                    this.getmvAllLimitData(element)
                  }} className={this.state.tabListSectioncls === element ? this.state.class2 : this.state.class1}>{element}</span></li>
                })
              }
            </ul>
          </div>
          <div className="type-wrap">
            <span className="type-type">类型：</span>
            <ul className="tabs-wrap">
              {
                this.state.tabListType.map((element, i) => {
                  return <li key={i} className="tab"><span onClick={() => {
                    this.setState({
                      tabListTypecls: element,
                      current: 1
                    })
                    this.getmvAllLimitData(this.state.tabListSectioncls, this.state.tabListOrdercls, element)
                  }} className={this.state.tabListTypecls === element ? this.state.class2 : this.state.class1}>{element}</span></li>
                })
              }
            </ul>
          </div>
          <div className="order-wrap">
            <span className="type-type">排序：</span>
            <ul className="tabs-wrap">
              {
                this.state.tabListOrder.map((element, i) => {
                  return <li key={i} className="tab"><span onClick={() => {
                    this.setState({
                      tabListOrdercls: element,
                      current: 1
                    })
                    this.getmvAllLimitData(this.state.tabListSectioncls, this.state.tabListTypecls, element)
                  }} className={this.state.tabListOrdercls === element ? this.state.class2 : this.state.class1}>{element}</span></li>
                })
              }
            </ul>
          </div>
        </div>
        <div className="mvs">
          <div className="mvs-items">
            {
              this.state.data.map(element => {
                return <div className="mvs-item" key={element.id} onClick={() => { this.props.history.push(`/mv/${element.id}`) }}>
                  <div className="img-wrap">
                    <img src={element.cover} alt="" />
                    <div className="num-wrap">
                      <div className="icon">播放次数：</div>
                      <div className="num">{element.playCount < 10000 ? element.playCount : parseInt(element.playCount / 10000) + '万'}</div>
                    </div>
                  </div>
                  <div className="info-wrap">
                    <div className="name">{element.name}</div>
                  </div>
                </div>

              })
            }

          </div>
          <Pagination style={{ textAlign: "center" }} current={this.state.current} total={this.state.count} pageSize={12} onChange={this.OnChanges.bind(this)} />
        </div>
      </div>
    )
  }
}
export default withRouter(index)